﻿@model Auction_Intranet.Models.CreateGroupModel

@{
	    AjaxOptions options = new AjaxOptions{
	        HttpMethod = "Post",            
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "create-group-form-container",
            OnSuccess = "InitCreateGroup",
            LoadingElementId = "progress-create-group",
            OnComplete = "create_group_initialization",
            OnFailure = "create_group_initialization"                           
	    };       
	     
}

@using (Ajax.BeginForm("_FormCreateGroup", "AJAXForm", options, new { @class = "create-group-form create-group-form-screen" }))
{
    <div id="progress-create-group">
        <img src="@Url.Content("~/Content/images/icons/loading-stats.gif")" alt="Loading..." />
    </div>
    
    <legend>Create Group</legend>
     
    <div class="create-group-form-errors form-validation-display">  
        @Html.ValidationSummary(true)    
        @Html.ValidationMessageFor(model => model.name)  
        @Html.ValidationMessageFor(model => model.addedCredit)
        <div class="create-group-form-errors-script">
        </div>       
    </div>  
    <div class="hide editor-field">
        @Html.EditorFor(model => model.userId) 
    </div>
    <div class="hide editor-field available-credit">
        <p class="userCredit">@Html.EditorFor(model => model.userBalance)</p>
        @Html.ValidationMessageFor(model => model.userBalance)        
    </div>
    <div class="create-group-form-container-1 col">
        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.name, new { placeholder = "name", autocomplete = "off" })
            
        </div>
    </div>
    <div class="amounts col">
        <div class="editor-label">
            <p>@Html.LabelFor(model => model.addedCredit)</p>
            <p>Available: <span class="available-balance ">@Model.userBalance</span></p>            
        </div>
        <div class="editor-field spinner">            
            @Html.TextBoxFor(model => model.addedCredit, new { @class = "spinner-create-group", autocomplete = "off", placeholder = "amount" })
        </div>
    </div>
    <div class="create-group-form-container-3 col">
        <div class="members-label editor-label">
            <p>Members to add</p>
        </div>
        <div class="added-inputs"></div>
        <div class="available-inputs">
                <div class="input-1 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember1, new { @class = "create-group-input ui-widget", id = "input-1" , placeholder="username"})
                <span data-id="input-1" class="add-member-input"></span>
            </div>
            <div class="input-2 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember2, new { @class = "create-group-input ui-widget", id = "input-2", placeholder = "username" })
                <span data-id="input-2" class="add-member-input"></span>
            </div>
                <div class="input-3 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember3, new { @class = "create-group-input ui-widget", id = "input-3", placeholder = "username" })
                <span data-id="input-3"  class="add-member-input"></span>
            </div>
            <div class="input-4 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember4, new { @class = "create-group-input ui-widget", id = "input-4", placeholder = "username" })
                <span data-id="input-4" class="add-member-input"></span>
            </div>
            <div class="input-5 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember5, new { @class = "create-group-input ui-widget", id = "input-5", placeholder = "username" })
                <span data-id="input-5" class="add-member-input"></span>
            </div>
            <div class="input-6 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember6, new { @class = "create-group-input ui-widget", id = "input-6", placeholder = "username" })
                <span data-id="input-6" class="add-member-input"></span>
            </div>
            <div class="input-7 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember7, new { @class = "create-group-input ui-widget", id = "input-7", placeholder = "username" })
                <span data-id="input-7" class="add-member-input"></span>
            </div>
        </div>        
    </div>
    <div class="create-group-form-container-4 col">    
        <div class="create-group-form-info">
            <p>You will automatically be a member of the group</p>
            <p>Press the green icon to add member</p>
            <p>Max group size 8 members</p>
        </div>          
        <input type="submit" name="AJAXCreateGroupPost" value="Create" title="Create Group" class="input-button" />
    </div>
}


<script type="text/javascript">

    function InitCreateGroup() {      
        var ok = @Model.success;
        //close colorbox
        if(ok === 1)
        {
            $("#make-bid-inline").colorbox.close();
            location.reload();
        }
    }

    $(function () {
        $( ".spinner-create-group" ).spinner({
            max: $(".available-credit input").val(),
            min: 1
        });
    });

</script>
